<template>
  <div class="answer_list">
	  <img :src="contentBackground" alt="">
    <!--    顶部返回按钮-->
    <div class="head_return" @click="headReturn">
    </div>
    <div class="topic_top">
		<img :src="topimg" alt="">
    </div>
    <div class="topic_con">
		<!-- 概括力测试 -->
		<wordlogic 
		v-if="type=='wordlogic'"
		ref="mysummary" @countdown="countdown"
		@setSummarizeIndex="setSummarizeIndex"
		 @Jump="Jump"
		 :questionList="allquestion"></wordlogic>
		 <!-- 阅读实战 -->
		 <readactual v-if="type=='readactual'"></readactual>
		 <!-- 情景再现 -->
		 <scene v-if="type=='scene'"></scene>
		 <!-- 识字量 -->
		 <quantityliteracy v-if="type=='quantityliteracy'"></quantityliteracy>
			<!--提交-->
      <div class="submit" @click="submit">
      </div>
      <div class="topic_progress" v-if="type=='wordlogic'">
		  <div class="topic_progress_txt">第{{summarizeIndex}}组</div>
        <div class="progress_list">
          <div class="pro_mask" :style="{width: countDownTime + '%'}"></div>
        </div>
      </div>
	  <div v-if="type=='readactual'||type=='scene'||type=='quantityliteracy'" class="readactual_index"></div>
    </div>
  </div>
</template>

<script>
import wordlogic from '../../components/answer/wordlogic.vue' //概括力测试
import readactual from '../../components/answer/readactual.vue' //阅读实战
import scene from '../../components/answer/scene.vue' //情景再现
import quantityliteracy from '../../components/answer/quantityliteracy.vue' //识字量
import question from '../../components/question/index.vue'
import breadth3 from '../../assets/image/lesson/breadth3.png'   //阅读实战
import contentBackground3 from '../../assets/image/lesson/lesback2.png'
import breadth2 from '../../assets/image/lesson/breadth2.png'    //概括力
import contentBackground2 from '../../assets/image/lesson/lesback1.png'
// 情景再现
import contentBackground15 from "../../assets/image/lesson/lesback15.png";
import topbBack15 from "../../assets/image/lesson/breadth15.png";
//识字量
import contentBackground4 from "../../assets/image/lesson/lesback3.png";
import breadth4 from "../../assets/image/lesson/breadth4.png";
export default {
  name: "answerList",
  components:{
	  question,
	  readactual,
	  wordlogic,
	  scene,
	  quantityliteracy
  },
  data(){
    return {
		type:'',
		topimg:'',
		contentBackground:'',
	  letterArray:['A','B','C','D'],
      currItemel: -1,
      countDownTime: 0,
      // 试题列表
      topicList: [
        {tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list: ['提高记忆力加工的能力','提高记忆力加工的能力','提高记忆力加工的能力']},
        {tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list: ['提高记忆力加工的能力','提高记忆力加工的能力','提高记忆力加工的能力']},
        {tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list: ['提高记忆力加工的能力','提高记忆力加工的能力','提高记忆力加工的能力']}
      ],
	  choseitemFlag:-1,
	  //概括力   答题的第几组
	   summarizeIndex:null,
	   //所有的题
	   allquestion:[],
	   timeNo:null
    }
  },
  mounted() {
  	  // this.$emit("closeloading")
	  // this.$store.commit('setSummarize',0)
this.type=this.$route.query.type
	
	this.renderpage()
	// this.$refs.mysummary.nextGroup();
  },
  watch: {
  	countDownTime(newValue, oldValue) {
  		if(newValue==100){
			this.$refs.mysummary.nextGroup();
			
		}
  	}
  },
  methods:{
	  Jump(path,query){
	  	console.log(path)
		console.log(query)
		// return
		this.$router.push({'path':path,query:query})

	  },
	  submit(){
		  if(this.type=='wordlogic'){
			  this.$refs.mysummary.submit();
			  return
		  }
	  },
	  setSummarizeIndex(n){
		  console.log('suoyin------'+n)
		  this.summarizeIndex=n+1
	  },
	  countdown(start,end){
		  if(this.type!='readactual'){
			  return
		  }
		  //当前请求时间和这道题应该到到时间
		  console.log(start)
		  console.log(end)
		  console.log(end-start)
		  clearInterval(this.timeNo)
		  var step=(end-start)/10000
		  console.log(step)
		  if(step<=0){
			  this.countDownTime=100

			  //调用子组件下一组功能
			  return
		  }
		 this.timeNo=setInterval(() => {
		    if(this.countDownTime < 100){
				this.countDownTime = this.countDownTime +step
		    }else if(this.countDownTime+step>=100){
				this.countDownTime=100

				clearInterval(this.timeNo)
			}
		  },100)
	  },
	  renderpage(){
		  console.log(this.type)
		if(this.type=='wordlogic'){
			//概括力
			this.topimg=breadth2
			this.contentBackground=contentBackground2
			return
		}
		if(this.type=='readactual'){
			//概括力
			this.topimg=breadth3
			this.contentBackground=contentBackground3
			return
		}
		if(this.type=='scene'){
			//概括力
			this.topimg=topbBack15
			this.contentBackground=contentBackground15
			return
		}
		if(this.type=='quantityliteracy'){
			//概括力
			this.topimg=breadth4
			this.contentBackground=contentBackground4
			console.log('quantityliteracy')
			return
		}
	  },
	  choseitem(n){
	  	this.choseitemFlag=n
	  },
    // 返回上一页
    headReturn(){
      this.$router.go(-1)
    },
    changeItemel(index){
      this.currItemel = index
    },
    // 下一组
    nextGroup(){
      console.log(1)
    }
  },

}
</script>

<style lang="less" scoped>
.answer_list {
  position: relative;
  height: 100vh;
  font-size: .16rem;
  color: #fff;
  overflow: hidden;
  // background: url("../../assets/image/lesson/lesback.png") no-repeat;
  background-size: 100% 100%; 
  &>img{
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
  }
  .head_return{
    position: absolute;
    top: 0.3rem;
    left: 0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    background: url("../../assets/image/lesson/return.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    &>img {
      width: 100%;
      height: 100%;
    }
  }
  .topic_top {
    position: relative;
    margin: -0.8rem auto 0 42%;
    width: 3.66rem;
    height: 2.06rem;
    // background: url("../../assets/image/lesson/breadth.png") no-repeat;
    background-size: 100% 100%;
	&>img{
		width: 88%;
		height: 100%;
	}
  }

  .topic_con{
    position: relative;
    margin: 0 auto;
	margin-top: 0.21rem;
    width: 12.07rem;
    height: 7.65rem;
    color: #5175df;
    box-sizing: border-box;
    background: url("../../assets/image/lesson/backgd.png") no-repeat;
    background-size: 100% 100%;
    .topic_con_scroll{
      overflow-y: scroll;
      height: 100%;
      //火狐浏览器隐藏滚动条
      & {
        scrollbar-color: #9eb0e6 #f7f7f9;
        scrollbar-width: thin;
        scrollbar-track-color: transparent;
        -ms-scrollbar-track-color: transparent;
      }
      /* 设置滚动条的样式 谷歌  */
      &::-webkit-scrollbar {
        width:12px;
      }
      /* 滚动槽 */
      &::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(223, 224, 229);
        border-radius:10px;
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(158, 176, 230);
        -webkit-box-shadow:inset006pxrgba(158, 176, 230);
      }
      &::-webkit-scrollbar-thumb:window-inactive {
        background:rgba(229, 226, 217);
      }
      .topic_item{
        font-size: .21rem;
        .topic_item_t{
          display: flex;
          &>span{
            color: #2175F4;
          }
          &>img{
            margin: 0 .4rem;
            width: 0.75rem;
            height: 0.75rem;
          }
          &>p {
          }
        }
        .topic_item_p{
          display: flex;
          flex-wrap: wrap;
          margin: .3rem 0;
		   padding-left: 1.5rem;
          .item_p_sel{
            position: relative;
            margin: .13rem .4rem;
            padding: 0 .3rem 0 .6rem;
            height: .6rem;
            line-height: .6rem;
            text-align: center;
            color: #333;
            font-size: 0.18rem;
            border: 1px solid #c8c7c4;
            border-radius: 45px;
            cursor: pointer;
            .target{
              position: absolute;
              top: 50%;
              left: .2rem;
              transform: translateY(-60%);
              width: 0.35rem;
              height: 0.38rem;
            }
          }
          .curr_item_p_sel{
            background: #e8edf3;
          }
        }
      }
      .next_group{
        float: right;
        width: 1.68rem;
        height: 0.66rem;
        cursor: pointer;
        &>img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .topic_progress{
      position: absolute;
      top: -0.4rem;
      left: 0;
      width: 3.8rem;
      height: 1.2rem;
      background: url("../../assets/image/lesson/progress.png");
      background-size: 100% 100%;
	  .topic_progress_txt{
		  font-size: 0.35rem;
		  color: white;
		  line-height: 1.2rem;
		  padding-left: 0.2rem;
	  }
      .progress_list{
        display: flex;
        justify-content: space-around;
        position: absolute;
        right: .42rem;
        bottom: .32rem;
        width: 1.96rem;
        height: 0.15rem;
        background: url("../../assets/image/lesson/protime.png");
        background-size: 100% 100%;
        .pro_mask{
          width: 0;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: #7e84c8;
          &::before{
            position: absolute;
            left: 0;
            top: -0.2em;
            content: '';
            width: .2rem;
            height: .2rem;
            background: pink;
            border-radius: 50%;
          }
        }
      }
    }
	
    // 提交
    .submit{
      position: absolute;
      left: 50%;
      bottom: -0.3rem;
      transform: translateX(-50%);
      width: 2rem;
      height: 0.8rem;
      background: url("../../assets/image/lesson/submit.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
}
		.topic_item_chose{
			margin-top: 0.07rem;
			padding-left: 1.8rem;
			// overflow: hidden;
			height: 0.68rem;
			.topic_item_chose_item_father{
				height: 0.52rem;
				padding:0.08rem 0.1rem ;
				width: 0.92rem;
				border-radius: 0.36rem;
				background: #FFFBF0;
				float: left;
				position: relative;
			}
			.topic_item_chose_item{
				width:100%;
				height: 100%;
				// padding: 0 0.24rem;
				line-height: 0.48rem;
				font-size: 0.21rem;
				box-sizing: border-box;
				text-align: center;
				// float: left;
				color: #333333;
				border: 0.04rem solid #F3F2EF;
				background: white;
				border-radius: 0.26rem;
				cursor: pointer;
				margin-right: 0.14rem;
				position: relative;

				&>.ch_box{
					width: 0.34rem;
					height: 0.34rem;
					position: absolute;
					right: 0;
					bottom: -0.06rem;
					background-size: 100%;
					background-repeat: no-repeat;
				}

				&>.hand_gif{
					width: 1rem;
					height: 1rem;
					position: absolute;
					bottom: -0.5rem;
					right: -0.5rem;
					z-index: 35;
					&>img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.topic_item_chose_item:hover{
				background: #D2DFF6;
				color: #395DD2;
				border: 0.04rem solid #D2DFF6;
			}
			.topic_item_is_chose{
				background: #5B7CE8;
				color: #FFFFFF;
				border: 0.04rem solid #5B7CE8;
			}
		}
		.topic_item_tips{
			font-size: 0.21rem;
			color: #373737;
			padding-left: 1.85rem;
			margin: 0.34rem 0 0.28rem;
			position: relative;
			&>span{
				position: relative;
				&>div{
					height: 0.05rem;
					position: absolute;
					background-color: #5B7CE8;
					border-radius: 0.3rem;
					left: 0%;
					bottom: -10%;
				}
			}
		}
		.readactual_index{
			width: 1.19rem;
			height: 1.19rem;
			background-image: url(../../assets/image/lesson/jioabiiao.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: -0.25rem;
			left: -0.33rem;
		}
</style>
